<div bsModal #createOrEditModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal"
    aria-hidden="true" [config]="{ backdrop: 'static' }" (onHidden)="onHidden()">
    <div class="modal-dialog modal-xxl">
        <div class="modal-content">
            <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">

                    <div class="col-md-3">

                    </div>

                    <div class="col-md-3">
                        <button type="button" class="close" (click)="cancel()" [attr.aria-label]="l('Close')">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                </div>

                <div class="modal-body">
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">


                        <div class="m-subheader">
                            <div class="row">

                                <div class="col-4">
                                    <div class="form-group m-form__group row">
                                        <label class="col-5 col-form-label" for="f_BillName">单据名称:</label>
                                        <div class="col-7">
                                            <input type="text" class="form-control m-input" name="f_BillName" id="f_BillName"
                                                value="{{this.billbase.f_Dept}}工装借用" readonly />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="form-group m-form__group row">
                                        <label class="col-5 col-form-label" for="f_PlanNumber">计划号:</label>
                                        <div class="col-7">
                                            <input type="text" class="form-control m-input" name="f_PlanNumber" id="f_PlanNumber"
                                            [(ngModel)]="PlanNumber" />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="form-group m-form__group row">
                                        <label class="col-5 col-form-label" for="f_ContractNumber">合同编号:</label>
                                        <div class="col-7"> 
                                                <input type="text" class="form-control m-input" name="f_ContractNumber" id="f_ContractNumber"
                                            [(ngModel)]="ContractNumber" />
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="col-4">
                                    <div class="form-group m-form__group row">
                                        <label class="col-5 col-form-label" for="optionOutLearder">审核领导</label>
                                        <div class="col-7">
                                            <camc-dropdown class="float-left"  placeholder="请选择" id="f_AuditLeader" [options]="optionOutLearder"
                                                name="f_AuditLeader" [(ngModel)]="selectedOutLearder" [style]="{ width: '200px' }">
                                            </camc-dropdown>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group m-form__group row">
                                        <label class="col-5 col-form-label" for="optionInAccounting">领用单位会计</label>
                                        <div class="col-7">
                                            <camc-dropdown class="float-left" placeholder="请选择" id="f_AuditAccount" [options]="optionInAccounting"
                                                name="f_AuditAccount" [(ngModel)]="selectedInAccounting" [style]="{ width: '200px' }">
                                            </camc-dropdown>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group m-form__group row">
                                        <label class="col-5 col-form-label" for="optionInKeeper">领用单位保管员</label>
                                        <div class="col-7">
                                            <camc-dropdown class="float-left" placeholder="请选择" id="f_AuditStoreman" [options]="optionInKeeper"
                                                name="f_AuditStoreman" [(ngModel)]="selectedInKeeper" [style]="{ width: '200px' }">
                                            </camc-dropdown>
                                        </div>
                                    </div>
                                </div> -->

                            </div>
                        </div>
                        <hr />
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h4 class="m-subheader__title">借用单详细信息</h4>
                            </div>
                            <div class="col-md-6 m--align-right">
                                <div class="btn-group m-btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-default m--padding-left-5 m--padding-right-5"
                                        (click)="accountmodalshow()">
                                        新增
                                    </button>
                                    <button [disabled]="!selectedBill" type="button" class="btn btn-default m--padding-left-5 m--padding-right-5"
                                        (click)="delete()">
                                        删除
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-12 m--margin-top-20">
                                <p-table #dataTable [value]="miliOutBillList" [paginator]="false" [lazy]="true"
                                    [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengTableHelper.resizableColumns" [(selection)]="selectedBill"
                                    datakey="id">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width:25px">
                                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                            </th>
                                            <th style="width: 40px">
                                                序号
                                            </th>
                                            <th width="120px">
                                                工装编码
                                            </th>
                                            <th width="120px">
                                                工装名称
                                            </th>
                                            <th width="120px">
                                                源仓库
                                            </th>
                                            <th width="120px">
                                                源库位名称
                                            </th>
                                            <th width="120px">
                                                目标仓库
                                            </th>
                                            <th width="120px">
                                                目标库位名称
                                            </th>
                                            <!-- <th width="120px">
                                                序列号
                                            </th> -->
                                            <th width="90px">
                                               借用数量
                                            </th>
                                            <th width="90px">
                                                计量单位
                                            </th>

                                            <th width="120px">
                                                单价
                                            </th>
                                            <!-- <th width="120px">
                                                品牌
                                            </th> -->
                                            <th width="120px">
                                                规格
                                            </th>

                                            <th width="80px">
                                                工装图号
                                            </th>
                                            <th width="80px">
                                                产品型号
                                            </th>
                                            <th width="80px">
                                                规格
                                            </th>
                                            <th width="80px">
                                                重量
                                            </th>
                                            <th width="80px">
                                                载荷
                                            </th>
                                            <th width="80px">
                                                长×宽×高
                                            </th>
                                            <th width="80px">
                                                是/否易耗品
                                            </th>
                                           
                                            <th width="120px">
                                                    借用理由
                                                </th>
                                        </tr>
                                    </ng-template>

                                    <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                        <tr [pSelectableRow]="record">
                                            <td style="width: 25px">
                                                <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                            </td>
                                            <td style="width: 40px">
                                                {{ i + 1 }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_MaterialCode }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_MaterialName }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_WarehouseName }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_StorageAreaName }}
                                            </td>
                                            <td width="120px">
                                                    {{ record.f_WarehouseName }}
                                                <!-- <select #itemsCombobox name="f_TargetRoomName" class="form-control" id="f_TargetRoomName"
                                                    [(ngModel)]="f_Warehouse" [attr.data-live-search]="true" (change)='getStorage(i)'>
                                                    <option *ngFor="let room of roomOption" value="{{room.value}}">{{room.lable}}</option>
                                                </select> -->
                                            </td>
                                            <td width="120px">
                                                    {{ record.f_StorageAreaName }}
                                                    <!-- <select #itemsCombobox name="f_TargetLocationName" class="form-control" id="f_TargetLocationName"
                                                    [(ngModel)]="f_StorageArea" [attr.data-live-search]="true" (change)='getStorageInfo(i)'>
                                                    <option *ngFor="let room of f_StorageAreaCodeOption" value="{{room.value}}">{{room.lable}}</option>
                                                </select> -->
                                            </td>
                                            <!-- <td width="120px">
                                                {{ record.f_InventSerialID }}
                                            </td> -->

                                            <td  width="90px">
                                                    <input type="number" [(ngModel)]="record.f_Quantity" style="width: 100%;"
                                                    [name]="'f_Quantity_' + i" min="1" />
                                                <!-- <p-cellEditor>
                                                    <ng-template pTemplate="input">
                                                        <input pInputText type="number" [(ngModel)]="record.f_Quantity"
                                                            style="width: 100%;" name="f_Quantity" min="1" />
                                                    </ng-template>
                                                    <ng-template pTemplate="output">
                                                        <input pInputText type="number"  [(ngModel)]="record.f_Quantity" style="width: 100%;"
                                                            name="f_Quantity" min="1" />
                                                    </ng-template>
                                                </p-cellEditor> -->
                                            </td>
                                            <td width="90px">
                                                {{ record.f_Unit }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_UnitPrice }}
                                            </td>

                                            <!-- <td width="120px">
                                                {{ record.f_TradeMark }}
                                            </td> -->
                                            <td width="120px">
                                                {{ record.f_Specification }}
                                            </td> 
                                            <td width="80px">
                                                {{ record.f_CAL_ToolingPictureId }}
                                            </td>
                                            <td width="80px">
                                                {{ record.f_CAL_ProductModel }}
                                            </td>
                                            <td width="80px">
                                                {{ record.f_CAL_ProductPictureId }}
                                            </td>
                                            <td width="80px">
                                                {{ record.f_CAL_ToolingWeight }}
                                            </td>
                                            <td width="80px">
                                                {{ record.f_CAL_ToolingMaxLoad }}
                                            </td>
                                            <td width="80px">
                                                {{ record.f_CAL_ProductModelRemark }}
                                            </td>
                                            <td width="80px">
                                                {{ record.f_CAL_IsAttrition }}
                                            </td>
                                            <td pEditableColumn width="120px">
                                                    <p-cellEditor>
                                                        <ng-template pTemplate="input">
                                                            <input pInputText type="text" [(ngModel)]="record.f_BorrowReason"
                                                                style="width: 100%;" name="f_BorrowReason" />
                                                        </ng-template>
                                                        <ng-template pTemplate="output">
                                                            <input pInputText type="text" [(ngModel)]="record.f_BorrowReason" style="width: 100%;"
                                                                name="f_BorrowReason" />
                                                        </ng-template>
                                                    </p-cellEditor>
                                                </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button [disabled]="saving" type="button" class="btn btn-default" (click)="cancel()">
                            {{ l('Cancel') }}
                        </button>

                        <button type="submit" class="btn btn-primary blue" [disabled]="!editForm.form.valid"
                            [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                            <i class="fa fa-save"></i>
                            <span>{{ l('Save') }}</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>


</div>